<template>
    <div class="bnh-pieBox">
        <div class="bnh-pieBox-head">
            <p class="bnh-pieBox-title">{{tiTle}}</p>
            <div class="bnh-genduobox flex flex-align-center">
                <p>详细</p>
                <img src="@/assets/img/right.png" alt="">
            </div>
        </div>
        <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart"></div>
        <div class="EchartClass">
            <div class="class-item flex flex-align-center" v-for='item in classList'>
                <div class="bnh-pieDian" :class='item.color'></div>
                <p>{{item.name}}</p>
            </div>
        </div>
    </div>
</template>
<script>
    import echarts from 'echarts'
    export default{
          props: {
            className: {
                type: String,
                default: 'yourClassName'
                },
                id: {
                    type: String,
                    default: 'echartsPie'
                },
                width: {
                    type: String,
                    default: '235px'
                },
                height: {
                    type: String,
                    default: '230px'
                },
                classList:{
                    type: Array
                },
                tiTle:{
                    type: String,
                    default: '用户统计'
                },
                echartsData:{
                    type: Array
                },
                color:{
                    type: Array
                }
            },
            data() {
                return {
                chart: null
                }
            },
        mounted() {
            this.initChart();
        },
        beforeDestroy() {
            if (!this.chart) {
            return
            }
            this.chart.dispose();
            this.chart = null;
        },
        methods:{
            initChart(){
                this.chart = echarts.init(this.$refs.myEchart);
                // 把配置和数据放这里
                this.chart.setOption({
                tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                series : [
                    {
                        name: this.tiTle,
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:this.echartsData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ],
                color:this.color
                })
            }
        }
    }
</script>
<style scoped>
.bnh-pieBox{background: #fff;height: 4.62rem;position: relative}
.bnh-pieBox-head{height: 1rem;position: absolute;top: 0;left: 0;width: 7.5rem}
#echartsPie{margin-left: 1.95rem;margin-top: -20px}
.bnh-pieBox-title{font-size: 0.36rem;color: #000;font-weight: bold;position: absolute;top: 0.1rem;left: 0.28rem}
.bnh-genduobox{position: absolute;bottom: 10px;right: 0.23rem;font-weight: bold}
.bnh-genduobox > img{height: 0.28rem;width: auto;margin-left: 3px}
.EchartClass{height: 1.8rem;width: 1.3rem;position: absolute;bottom: 15px;left: 0.28rem}
.bnh-pieDian{height: 0.2rem;width: 0.2rem;border-radius:50%;margin-right: 2px}
.bnh-pt{background: rgb(255,159,127)}
.bnh-v1{background: rgb(254,219,91)}
.bnh-v2{background: rgb(109,244,227)}
.bnh-v3{background: rgb(60,178,239)}
.class-item{font-size: 0.18rem}
</style>

